<template>
  <div>
    <header class="header">
      <!--          <div v-for="(item,index) in topInputList" :key="index" class="everyBox">-->
      <!--            <span class="span">{{item.title}}：</span>-->
      <!--            <el-input  placeholder=""  v-model="item.text" :placeholder="item.title" class="top-input"></el-input>-->
      <!--          </div>-->
      <div class="everyBox slelctBox">
        <span class="span">状态：</span>
        <el-select
          v-model="value1"
          placeholder="请选择"
          @change="opctionchangeOne"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
      </div>
    </header>
    <div class="body">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        fit
        @selection-change="handleSelectionChange"
      >
        <el-table-column show-overflow-tooltip prop="id" label="ID" width="80">
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="nickname"
          label="用户"
          width="150"
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="money"
          label="金额"
          width="100"
        >
        </el-table-column>
        <el-table-column show-overflow-tooltip label="状态" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.status_text }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="提现时间">
          <template slot-scope="scope">
            <span>{{ getNowTime(scope.row.ctime) }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="tongguo(scope.row)"
              v-if="scope.row.type == 1"
              >通过</el-button
            >
            <el-button
              size="mini"
              type="info"
              @click="bohui(scope.row)"
              v-if="scope.row.type == 1"
              >驳回</el-button
            >
            <div v-else>已操作</div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { tixianList, examine } from "../../../utils/api";
export default {
  name: "tixian",
  data() {
    return {
      loading: true,
      tableData: [],
      limit: 10,
      currentPage: 1,
      total: 0,
      token: sessionStorage.getItem("token"),
      value1: "",
      options1: [
        {
          value: "111",
          label: "请选择",
        },
        {
          value: "1",
          label: "未审核",
        },
        {
          value: "2",
          label: "审核通过",
        },
        {
          value: "3",
          label: "审核拒绝",
        },
      ],
    };
  },
  watch: {
    value1(n, o) {
      if (n == 111) {
        this.value1 = "";
      }
    },
  },
  mounted() {
    this.tixianList();
  },
  methods: {
    search() {
      this.tixianList();
    },
    tongguo(row) {
      let id = row.id;
      this.$confirm("您确定做此操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          // console.log(row.id)
          this.examine(this.token, id, 2);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    bohui(row) {
      let id = row.id;
      this.$confirm("您确定做此操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          console.log(id);
          this.examine(this.token, id, 3);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    examine(token, id, type) {
      examine(token, id, type)
        .then((res) => {
          console.log(res);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.tixianList();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getNowTime(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let seconds = date.getSeconds();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        seconds
      );
    },
    handleSelectionChange() {},
    tixianList() {
      tixianList(
        this.token,
        this.currentPage,
        this.limit,
        this.value1,
        ""
      ).then((res) => {
        this.loading = true;
        // type 1未审核  2审核通过  3驳回
        if (res.data.status) {
          console.log(res.data.data);
          this.tableData = res.data.data;
          this.total = res.data.count;
          this.tableData.forEach((item) => {
            if (item.type == 1) {
              item.status_text = "未审核";
            }
            if (item.type == 2) {
              item.status_text = "审核通过";
            }
            if (item.type == 3) {
              item.status_text = "已驳回";
            }
            console.log(item);
          });
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          }, 500);
        }
      });
    },
    opctionchangeOne(e) {
      console.log(e);
    },
    handleSizeChange(val) {
      this.limit = val;
      // console.log(`每页 ${val} 条`);
      this.tixianList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tixianList();
    },
  },
};
</script>

<style scoped>
.header .span {
  font-size: initial;
}
/deep/.header {
  background: white !important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.body {
  margin: 20px 0;
}
/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
}
/deep/.el-table .cell.el-tooltip {
  text-align: center;
}
/deep/.el-table--border .el-table__cell:first-child .cell {
  text-align: center;
}
/deep/.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}
.everyBox {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.slelctBox {
  margin: 0 10px;
}
</style>
